<!--
 * @Author: Wangtao
 * @Date: 2020-10-22 19:27:39
 * @LastEditors: Wangtao
 * @LastEditTime: 2020-12-25 19:18:43
-->
<template>
  <continer>
    <template slot="content">
      <div
        class="group-node"
        v-for="(item, index) in editGroupList"
        :key="index"
      >
        <el-input
          v-model="item.name"
          @input="nodeChange(index)"
          :maxlength="6"
          :minlength="1"
          :validate-event="true"
        ></el-input>
        <i
          class="V7_iconfont V7_iconV7tubiao-109 delete-span"
          @click="remove(index)"
        ></i>
        <i
          class="V7_iconfont V7_iconV7tubiao_chenggong confirm-span"
          v-show="item.name && item.name.length > 0 && item.isEdit"
          @click="confirm(index)"
        ></i>
      </div>
      <div @click="addNode" class="add-span">
        <i class="V7_iconfont V7_iconV7tubiao_xinzeng"></i>增加分组
      </div>
    </template>
    <template slot="oprate">
      <el-button @click="cancel" size="mini">取消</el-button>
      <el-button type="primary" @click="onSubmit" size="mini">确定</el-button>
    </template>
  </continer>
</template>

<script lang="ts">
import { Component, Vue, Emit, Prop, Watch } from 'vue-property-decorator'
import continer from '@/components/configCommon/ui-modules/drawer-container.vue'
import cloneDeep from 'lodash/cloneDeep'
import { ElMessage } from 'element-ui/types/message'
import { GroupObject } from './types/group'
import { ElMessageBoxShortcutMethod } from 'element-ui/types/message-box'
@Component({
  name: 'edit-group',
  components: { continer }
})
export default class extends Vue {
  @Prop({ default: () => [] }) private groupList: GroupObject[] | undefined
  private editGroupList: GroupObject[] = [{ _id: '', name: '', isEdit: true }]
  private $message: ElMessage | undefined
  private $confirm: ElMessageBoxShortcutMethod | undefined
  @Watch('groupList', { immediate: true })
  private groupListChange (list: GroupObject[]): void {
    const newList: GroupObject[] = cloneDeep(list).map(item => {
      item.isEdit = false
      return item
    })
    this.$set(this, 'editGroupList', newList)
  }

  @Emit()
  private cancel (): boolean {
    return false
  }

  private addNode (): void {
    this.editGroupList.push({ _id: '', name: '', isEdit: true })
  }

  private nodeChange (index: number): void {
    this.editGroupList[index].isEdit = true
  }

  private confirm (index: number): void {
    let vt = false
    this.editGroupList.some((item: GroupObject, idx: number) => {
      if (item.name === this.editGroupList[index].name && idx !== index) {
        vt = true
        return true
      }
    })
    if (vt) {
      (this.$message as ElMessage).error({ message: '标签重复', type: 'error' })
      return
    }
    if (this.editGroupList[index].name.length > 0) {
      this.editGroupList[index].isEdit = false
    }
  }

  private remove (index: number): void {
    (this.$confirm as ElMessageBoxShortcutMethod)('确认删除此分组吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      this.editGroupList.splice(index, 1);
    })
  }

  private onSubmit (): void {
    let vt: boolean = true
    this.editGroupList.some((item: GroupObject) => {
      if (item.name.length > 0 && item.isEdit) {
        vt = false;
        (this.$message as ElMessage).error({ message: '您有标签未确认', type: 'error' })
        return true
      }
    })
    if (vt) {
      const saveList: GroupObject[] = []
      this.editGroupList.forEach((item: GroupObject) => {
        if (item.name && item.name.length > 0) {
          saveList.push({ _id: item._id, name: item.name })
        }
      })
      this.$emit('success', saveList)
    }
  }
}
</script>

<style lang="stylus" scoped>
.add-span
  margin-top 8px
  cursor pointer
  color $c-main
  display flex
  align-items center
  i
    font-size 10px
  &:hover
    opacity 0.8
.group-node
  display flex
  flex-direction row
  align-items center
  margin-bottom 10px
  i
    margin-left 10px
    cursor pointer
  .delete-span
    color $icon-gray
    &:hover
      color $c-danger
  .confirm-span
    color $c-main
    &:hover
      opacity 0.7
</style>
